<script type="text/ng-template" id="fcModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Submit changes</h3>
    </div>
    <div class="modal-body">
    <div ng-show="fcs.length==0">
    No changes
    </div>
    <div ng-show="fcs.length>0">
    <div ng-repeat="fc in fcs" class="row">
     <div class="align-right col-xs-9">{{fc.key}}:</div>
     <div class="col-xs-3">{{fc.old}}->{{fc.value}}</div>
    </div>
    </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
        <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
    </div>
</script>
<table st-table="displayCollection" st-safe-src="vm.fcCollection" class="table table-striped" st-sticky-header st-sticky-header-top="65">
    <thead class="sticky-header">
        <tr>
            <th colspan="4" class="search-container">
                <div class="widget-header">
                    <span class="title">FC</span>
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fa fa-search"></i>
                        </div>
                        <input st-search placeholder="feature name" class="input-sm form-control" type="search"/>
                    </div>
		    <button ng-click="vm.openModal()" type="button" class="right-btn btn btn-primary" ng-show="vm.hasAuthority">Submit</button>
                </div>
            </th>
        </tr>
        <tr class="widget-header">
            <th class="sorting" st-sort="key" width="50%">Feature Name</th>
            <th class="sorting" st-sort="value" width="15%"></th>
	    <th class="sorting" st-sort="remark" with="35%"></th>
        </tr>
    </thead>
    <tbody>
	    <tr ng-repeat="fc in displayCollection | filter:vm.fcFilter" ng-class="{'value-changed':fc.value!=fc.old}">
            <td>{{fc.key}}</td>
            <td>
		    <switch ng-model="fc.value" class="green" disabled="!vm.hasAuthority"/>
            </td>
	    <td>{{fc.remark}}</td>
        </tr>
    </tbody>
</table>
